// 连接路由跟redux
// connectRouter
// routerMiddleware
// ConnectedRoouter
// push
import { Provider, useDispatch } from 'react-redux'
import store from '../../store'
import { ConnectedRouter, push } from 'connected-react-router'
import { createBrowserHistory } from 'history'
import { Link, Route } from 'react-router-dom'


export const history = createBrowserHistory();

history.listen((location, action) => {
  console.log(JSON.stringify(location), action, '监听变化')
})
function Child() {
  let dispatch = useDispatch()

  return (
    <>
      /
      还以可以通过派发方式跳转路径
      <div onClick={() => dispatch(push('/home'))}>goto home</div>
    </>
  )
}
// ConnectedRouter 相当于 router 多一个功能 可以监听路径变化 或者说路由的变量  并且派发动作给仓库 然后把最新的路径信息保存起来
function Comp() {
  console.log('root render')
  let click = () => {
    history.push({ pathname: '/home' })
  }
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <>
          <ul>
            <li><Link to="/">/</Link></li>
            <li onClick={click}>/home</li>
          </ul>
          <Route exact path="/">
            <Child />
          </Route>
          <Route exact path="/home">home</Route>
        </>
      </ConnectedRouter>
    </Provider>
  )
}

export default Comp